<template>
<div class="histogram-box">
    <div v-if="featureType === '连续型'" class="histogram-top-box">
        <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
                {{items[radio]}}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="(item, index) in items" :key="index" :command="index">{{item}}</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
        <div class="histogram-mid">
            <div class="mid-right-box">
                <div class="box-1">
                    <span>步长</span>
                    <div class="edit-btn-box">
                        <div class="show-plus" @click="handleChangeStep(false)">-</div>
                        <div class="show-con-box" contenteditable="true">{{stepVal}}</div>
                        <div class="show-add" @click="handleChangeStep(true)">+</div>
                    </div>
                    <span class="step-box">{{multiple}}</span> 倍
                </div>
                <el-divider direction="vertical"></el-divider>
                <div class="box-2">
                    <span>分箱数</span>
                    <span class="fenxiangshu">{{num}}</span>
                </div>
            </div>
        </div>
    </div>
    <div class="histogram-box">
        <div id="histogram"></div>
        <span v-if="!list.length" class="chart-no-data">暂无数据</span>
    </div>
</div>
</template>

<script>
import {
    mapGetters
} from 'vuex'
export default {
    name: 'Histogram',
    computed: {
        ...mapGetters({
            analysisReportData: 'common/getAnalysisReportData',
            univariateData: 'common/getUnivariateData'
        })
    },
    data () {
        return {
            currentItem: {},
            data: [],
            maxStep: 0,
            minStep: 0,
            multipleList: [],
            multiple: 1, // 倍数
            stepIndex: 0, // 步长索引
            stepVal: 0, // 步长
            num: 0, // 分箱数
            radio: 0, // 图表类型
            items: ['直方图+折线图', '直方图+概率密度图', '直方图+概率累积分布图'],
            list: [],
            label: true,
            featureType: '',
            option: {
                tooltip: {
                    confine: true,
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                dataZoom: [
                    {
                        showDetail: false,
                        disabled: true
                    },
                    {
                        type: 'inside',
                        showDetail: false,
                        disabled: true
                    }
                ],
                legend: {
                    y: '20px',
                    data: []
                },
                grid: {
                    left: '20px',
                    right: '20px',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: [],
                    axisPointer: {
                        type: 'shadow'
                    },
                    axisLabel: {
                        rotate: 30
                    }
                },
                yAxis: [{ type: 'value' }]
            }
        }
    },
    mounted () {
        this.label = this.analysisReportData['label']
        this.init(true)
    },
    watch: {
        univariateData () {
            this.init(true)
        }
    },
    methods: {
        handleCommand (command) {
            this.radio = command
            this.initContinue()
        },
        // 初始化连续型图表
        initContinue () {
            let series = []
            let types = []
            if (this.label) {
                types = this.univariateData['类别分布']
                for (let i = 0; i < types.length; i++) {
                    let arr = []
                    for (let n = 0; n < this.list.length; n++) {
                        arr.push(this.list[n].y[i])
                    }
                    series.push({
                        showSymbol: false,
                        name: types[i],
                        type: 'bar',
                        stack: 'bar',
                        data: arr
                    })
                }
            } else {
                let arr = []
                for (let i = 0; i < this.list.length; i++) {
                    arr.push(this.list[i].y)
                }
                series = [
                    {
                        type: 'bar',
                        showSymbol: false,
                        data: arr
                    }
                ]
            }
            let columns = []
            let otherTypes = []
            let yAxis = [{ type: 'value' }, { type: 'value' }]
            for (let i = 0; i < this.list.length; i++) {
                columns[i] = this.list[i].x
            }
            if (this.radio === 0) {
                if (this.label) {
                    series.push({
                        showSymbol: false,
                        name: '基尼',
                        type: 'line',
                        yAxisIndex: 1,
                        data: this.currentItem['gini']
                    }, {
                        showSymbol: false,
                        name: '熵',
                        type: 'line',
                        yAxisIndex: 1,
                        data: this.currentItem['熵']
                    })
                    otherTypes = ['基尼', '熵']
                } else {
                    this.option.yAxis = [{ type: 'value' }]
                }
            }
            if (this.radio === 1) {
                yAxis = [{ type: 'value' }, { type: 'value', max: 1 }]
                series.push({
                    showSymbol: false,
                    name: '概率密度图',
                    yAxisIndex: 1,
                    type: 'line',
                    areaStyle: {},
                    data: this.currentItem['概率密度图']
                })
                otherTypes = ['概率密度图']
            }
            if (this.radio === 2) {
                yAxis = [{ type: 'value' }, { type: 'value', max: 1 }]
                series.push({
                    showSymbol: false,
                    name: '概率累积分布图',
                    type: 'line',
                    yAxisIndex: 1,
                    areaStyle: {},
                    data: this.currentItem['概率累积分布图']
                })
                otherTypes = ['概率累积分布图']
            }
            let arr = JSON.parse(JSON.stringify(types))
            arr.length = 5
            this.option.legend.data = arr.concat(otherTypes)
            this.option.xAxis.data = columns
            this.option.yAxis = yAxis
            this.option.series = series
            this.setOption(this.option)
        },
        // 初始化离散型图表
        initDiscrete () {
            let series = []
            if (this.label) {
                let types = []
                for (let i = 0; i < this.list.length; i++) {
                    let item = this.list[i]
                    let type = Object.keys(item)[0]
                    types.push(type)
                    series.push({
                        showSymbol: false,
                        name: type,
                        type: 'bar',
                        stack: 'bar',
                        data: [Object.values(item)[0]]
                    })
                }
                this.option.legend.data = types
                this.option.xAxis.data = ['0']
                this.option.legend.data.length = 5
            } else {
                let arr = []
                let columns = []
                for (let i = 0; i < this.list.length; i++) {
                    arr.push(this.list[i].y)
                    columns.push(this.list[i].x)
                }
                series = [
                    {
                        type: 'bar',
                        data: arr
                    }
                ]
                this.option.xAxis.data = columns
            }
            this.option.series = series
            this.setOption(this.option)
        },
        init (flag) {
            this.featureType = this.univariateData['特征类型']
            if (this.featureType === '连续型') {
                if (flag) {
                    this.stepIndex = 0
                    this.data = this.label ? this.univariateData['直方图'].vector : this.univariateData['直方图']
                    this.multipleList = this.data.map(v => Object.keys(v)[0])
                    this.minStep = Object.values(this.data[0])[0]['步长']
                    this.maxStep = Object.values(this.data[this.data.length - 1])[0]['步长']
                }
                this.multiple = this.multipleList[this.stepIndex]
                for (let i = 0; i < this.data.length; i++) {
                    const key = Object.keys(this.data[i])[0]
                    if (key === this.multiple) {
                        this.currentItem = this.data[i][key]
                        break
                    }
                }
                this.list = this.currentItem['直方图'] || []
                this.stepVal = this.currentItem['步长']
                this.num = this.currentItem['分箱数']
                this.initContinue()
            } else {
                this.list = this.univariateData['直方图'] || []
                this.initDiscrete()
            }
        },
        handleChangeStep (isAdd) {
            if (isAdd) {
                if (this.stepIndex === this.multipleList.length - 1) {
                    this.stepIndex = this.multipleList.length - 1
                    return
                }
                this.stepIndex++
            } else {
                if (this.stepIndex === 0) {
                    this.stepIndex = 0
                    return
                }
                this.stepIndex--
            }
            this.init()
        },
        setOption (value) {
            let myChart = this.$echarts.init(document.getElementById('histogram'), 'walden')
            myChart.setOption(value, true)
            window.addEventListener('resize', () => myChart.resize())
            this.$nextTick(() => {
                window.removeEventListener('resize', () => myChart.resize())
            })
        }
    }
}
</script>
<style lang="less">
    .histogram-box {
        .box-1 {
            display: flex;
            align-items: center;
        }
        .edit-btn-box {
            margin: 0 5px;
            width: 160px;
            height: 34px;
            border: 1px solid #DCDFE6;
            background: #F5F7FA;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            div {
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .show-plus, .show-add {
                cursor: pointer;
                font-size: 16px;
                width: 35px;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }
            .show-con-box {
                white-space: nowrap;
                overflow: hidden;
                outline: none;
                background: #fff;
                width: 90px;
                border-left: 1px solid #DCDFE6;
                border-right: 1px solid #DCDFE6;
                justify-content: flex-start;
                padding: 0 5px;
            }
        }
        .histogram-top-box {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .step-box {
            display: inline-block;
            width: 20px;
            text-align: right;
        }
        .histogram-box {
            width: 100%;
            height: 400px;
            position: relative;
            .chart-no-data {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                font-size: 14px;
                color: #606266;
            }
        }
        #histogram {
            height: 100%;
            width: 100%;
        }
        .histogram-mid {
            border-radius: 4px;
            padding: 5px 10px;
            background: #f5f5f5;
            display: flex;
            justify-content: space-around;
            .box-2 {
                display: flex;
                align-items: center;
            }
            .fenxiangshu {
                display: inline-block;
                width: 50px;
                margin-left: 5px;
                font-size: 24px;
                color: #2680EB;
            }
            .mid-right-box {
                display: flex;
                align-items: center;
                .el-divider--vertical {
                    margin: 0 20px;
                }
            }
        }
    }
</style>
